<template>
    <div class="adminOrderMain">
        <Header/>
        <div class="myOrderTable">
            <div class="buttons">
                <el-button type="danger" @click="deleteOrder" style="margin-left: 10px" icon="el-icon-delete">删除</el-button>
            </div>
            <el-table
                    ref="orderTable"
                    :data="orderData"
                    tooltip-effect="dark"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="订单编号"
                        width="320">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="skuName"
                        label="商品名称"
                        width="200"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="qty"
                        label="数量"
                        width="80"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="单价"
                        width="80"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="总价"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="创建时间"
                        width="150"
                        show-overflow-tooltip>

                </el-table-column>
                <el-table-column
                        prop="updated_at"
                        label="最后更新时间"
                        width="150"
                        show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div>
        <div class="pager">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
    /* eslint-disable */
    import { Component, Vue } from 'vue-property-decorator';
    import Header from '@/components/common/header.vue';
    import PortalApiActions from "@/components/api/portal-api-actions";
    import moment from "moment";
    @Component({
        components:{
            Header
        }
    })
    export default class OrderList extends Vue {
        public searchText="";
        public isShowAddDialog=false;
        public orderData:any=new Array();
        public total:number=0;
        public pageSize=10;
        public curPage=1;
        async created(){
             await this.initPageData();
        }
        public async initPageData(){
            let orders=await PortalApiActions.listUserOrder({pageSize:this.pageSize,curPage:this.curPage});
            orders.data.data.forEach(item=>{
                item.totalPrice=item.qty*item.price;
                item.created_at=moment(item.created_at).format("YYYY-MM-DD HH:mm");
                item.updated_at=moment(item.updated_at).format("YYYY-MM-DD HH:mm");
            });
            this.orderData=orders.data.data;
            this.total=orders.data.count;
        }
        public async search(){

        }
        public async handleSizeChange(pageSize){
           this.pageSize=pageSize;
           await this.initPageData();
        }
        public async handleCurrentChange(curPage){
           this.curPage=curPage;
           await this.initPageData();
        }
        //删除用户选中订单
        public async deleteOrder(){
            let orderTables:any=this.$refs.orderTable;
            let selectData:Array<any>=orderTables.selection;
            let ids:Array<any>=new Array<any>();
            selectData.forEach(item=>{
                ids.push(item.id);
            });
            this.curPage=1;
            await PortalApiActions.deleteUserOrder({ids:ids});
            await this.initPageData();
        }

    }
</script>
<style lang="less">
    .adminOrderMain{
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         .myOrderTable{
              height: calc(100% - 220px);
              margin-left: 160px;
              margin-right: 150px;
             .buttons{
                 height: 70px;
                 width: 100%;
                 background: white;
                 display: flex;
                 align-items: center;
             }
             .el-table__body-wrapper{
                 overflow-y: auto;
                 position: relative;
                 height: calc(100% - 70px);
              }
             .el-table--fit{
                 height: calc(100% - 70px);
             }
         }
         .pager{
             height: 60px;
             background-color: white;
             margin-left: 160px;
             margin-right: 150px;
             display: flex;
             align-items: center;
         }
    }

</style>
